<template>
  <NuxtLayout>
    <div class="select-choose">
      <!-- 选择分类 -->
      <common-category v-model="query.categoryId" :default-value="route.query.categoryId" @change="handleChange" />
      <common-choose v-model="query.examType" :title="'考试类型'" :list="examTypeList" :default-value="route.query.examType" @change="handleChange" />
      <common-choose
        v-if="query.examType === '2'"
        v-model="query.registrationStatus"
        :title="'报名状态'"
        :list="registrationStatusList"
        :default-value="route.query.registrationStatus"
        @change="handleChange"
      />
      <common-choose v-model="query.free" :title="'付费类型'" :list="freeSetList" :default-value="route.query.free" @change="handleChange" />
    </div>
    <nuxt-link target="_blank" to="/about">
      <div class="tips">
        <div class="title">《织码考试》一个AI智能考试系统</div>
        <div>目前已经接入了多家大模型：Deepseek、阿里通义、腾讯混元、华为盘古等等，更多大模型正在接入中···</div>
      </div>
    </nuxt-link>
    <div class="main-container">
      <!-- 考试中心 -->
      <exam-list v-loading="page.loading" :list="page.list" />
      <!-- 分页功能 -->
      <common-pagination v-model:current-page="page.pageCurrent" v-model:page-size="page.pageSize" :total="page.totalCount" @pagination="handlePage" />
    </div>
  </NuxtLayout>
</template>
<script setup>
  import { examApi } from '~/api/exam.js'
  import useTable from '~/utils/table.js'
  import { examTypeList, freeSetList, registrationStatusList } from '~/utils/constants'

  useHead({
    title: '考试中心'
  })

  const router = useRouter()
  const route = useRoute()

  // 搜索处理
  const handleChange = () => {
    if (!query.categoryId) {
      delete query.categoryId
    }
    if (!query.free) {
      delete query.free
    }
    if (!query.examType) {
      delete query.examType
    }
    if (!query.registrationStatus) {
      delete query.registrationStatus
    }
    router.push({ query: query })
    handleQuery()
  }

  // 分页查询
  const { page, handlePage, query, handleQuery } = useTable(
    {
      page: examApi.examList
    },
    { categoryId: route.query.categoryId, registrationStatus: route.query.registrationStatus }
  )
</script>
<style lang="scss" scoped>
  .tips {
    padding: 20px 0;
  }
</style>
